<template>
    <div>
        <el-card> 所有订单：全部订单数据 </el-card>

        <el-card class="list">
            <el-table :data="currentPageData" border style="width: 100%" class="table">
                <el-table-column prop="petName" label="宠物名字" />
                <el-table-column prop="adopterAddress" label="领养人地址" />
                <el-table-column prop="adopterId" label="领养人ID" />
                <el-table-column prop="deposit" label="押金" />
                <el-table-column prop="orderStatus" label="订单状态" />
                <!-- 修改时间格式：2025-04-23T01:39:06 => 2025-04-23 01:39:06 -->
                <el-table-column label="创建时间">
                    <template #default="scope">
                        {{ scope.row.createTime ? scope.row.createTime.replace("T", " ") : "" }}
                    </template>
                </el-table-column>
                <el-table-column label="到货时间">
                    <template #default="scope">
                        {{ scope.row.deliveryTime ? scope.row.deliveryTime.replace("T", " ") : "" }}
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页器组件 -->
            <el-pagination
                class="mt-4"
                background
                layout="total, sizes, prev, pager, next, jumper"
                :current-page="currentPage"
                :page-sizes="[8, 10, 15]"
                :page-size="pageSize"
                :total="allOrderList.length"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />
        </el-card>
    </div>
</template>

<script setup lang="ts">
import { getAllOrderListAPI } from "@/api/order";
import { onMounted, ref, computed } from "vue";

const allOrderList = ref([]); // 全部订单数据
const currentPage = ref(1); // 当前页码
const pageSize = ref(8); // 每页显示条数

// 计算当前页要显示的数据
const currentPageData = computed(() => {
    const start = (currentPage.value - 1) * pageSize.value;
    const end = start + pageSize.value;
    return allOrderList.value.slice(start, end);
});

// 获取全部订单数据
const getAllOrderList = async () => {
    const res = await getAllOrderListAPI();
    allOrderList.value = res.data.items;
    //    console.log(allOrderList.value)
};

onMounted(() => {
    getAllOrderList();
});

// 处理每页条数变化
const handleSizeChange = (newSize: number) => {
    pageSize.value = newSize;
    currentPage.value = 1; // 重置为第一页
};

// 处理页码变化
const handleCurrentChange = (newPage: number) => {
    currentPage.value = newPage;
};
</script>

<style scoped>
.list {
    margin-top: 20px;
}

.table {
    margin-bottom: 20px;
}
</style>
